@import 'stylus-shortcut/src/mixin.styl';

colors ?= {
	border: #5f6b74,
	text: #525869,
	sub_text: #5f6b74,
	link_text: #375f99,
	nickname: #375f99,
	input_bg: white,
	input_line: #5f6b74,
	input_text: #5f6b74,
	btn_text: #fff,
	btn_line: #375f99,
	btn_bg: #375f99,
	tip_text: #ff6e6e,
};

.yoz-comment-container {
	.clearfix {
		&:after, &:before {
			content: ' ';
			display: table;
			clear: both;
		}
	}

	a {
		text-decoration: none;
		color: colors.link_text;
	}

	.clear-right {
		&:after {
			content: ' ';
			display: table;
			clear: both;
		}
	}

	.yoz-comment-form {
		margin-top: 20px;

		.input-col {
			width: 33.33%;
			float: left;
			box-sizing: border-box;
			l-ph: 10px;
		}

		input, textarea {
			l-wh: 100% 30px 4px;
			t-fl: 14px 20px colors.input_text;
			font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
			border: 1px solid colors.input_line;
			background: colors.input_bg;
			box-sizing: border-box;
			outline: none;
			padding: 5px 10px;
		}

		textarea {
			height: 120px;
			resize: none;
		}

		.message {
			margin-top: 10px;
			padding: 0 10px;
		}

		.btn-group {
			margin-top: 10px;
			padding: 0 10px;
			text-align: right;

			span {
				t-fl: 14px 35px colors.tip_text;
			}
		}
	}

	button {
		border: 1px solid colors.btn_line;
		l-wh: 80px 35px 4px;
		t-fl: 14px 20px colors.btn_text;
		font-weight: bold;
		outline: none;
		background: colors.btn_bg;
	}

	.yoz-comment-list {
		l-ph: 10px;

		.comment-item {
			border-top: 1px dotted colors.border;
			l-pv: 10px 0;
			// l-ph: 10px 0;
			l-mv: 10px 0;

			.comment-avatar {
				float: left;
				width: 60px;

				img {
					l-wh: 50px 50px 50px;
				}
			}

			.comment-option {
				text-align: right;
				t-fl: 12px 20px;
			}

			.comment-message {
				margin-left: 65px;
				min-height: 80px;

				.comment-nickname a {
					t-fl: 16px 20px colors.nickname;
					text-decoration: none;
					font-weight: bold;
				}

				.comment-time {
					float: right;
					t-fl: 12px 20px colors.sub_text;
				}

				div.comment-content {
					l-mv: 5px;
					t-fl: 14px 25px colors.text;
					word-wrap: break-word;
					white-space: pre-wrap;
				}
			}

			.comment-replys {
				l-mh: 30px 0;

				.comment-avatar {
					float: left;
					width: 40px;

					img {
						l-wh: 35px 35px 35px;
					}
				}

				.comment-message {
					margin-left: 45px;
				}
			}
		}
	}
}

@media screen and (max-width: 500px) {
	.yoz-comment-container {
		.yoz-comment-form {
			.input-col {
				l-ph: 5px;
				width: 100%;
				margin-top: 10px;
			}

			.message, .btn-group, .is-reply {
				l-ph: 5px;
			}
		}

		.yoz-comment-list {
			l-ph: 5px;

			.comment-item {
				.comment-avatar {
					width: 35px;

					img {
						l-wh: 30px 30px 30px;
					}
				}

				.comment-message {
					l-mh: 35px 0;
				}

				.comment-replys {
					margin-left: 20px;

					.comment-item {
						.comment-avatar {
							width: 35px;

							img {
								l-wh: 30px 30px 30px;
							}
						}

						.comment-message {
							l-mh: 35px 0;
						}
					}
				}
			}
		}
	}
}